page{height:100%;background-color:#F7F7F7;}
.container{
  height: 100%;
  width:100%;
  .userBox{
    //762
    height: 20%;
    width: calc(unit(120,rpx) * 750 / 390);
    position: absolute;
    top:0.5%;
    left:calc((100% - unit(120,rpx) * 750 / 390)/2);
    .userIcon{
      margin-right: auto;
      margin-left: auto;
      height: 15.7vh;
      width: 15.7vh;
      background-color: #F7F7F7;
      .iconImg{
        border-radius:calc(unit(100,rpx) * 750 / 390);
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      .clickImg{
        height:calc(unit(32,rpx) * 750 / 390);
        width:calc(unit(32,rpx) * 750 / 390);
        position: absolute;
        right: 0;
        bottom: calc(unit(33,rpx) * 750 / 390);

      }
    }
    .userIfo{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 22%;
      text-align: center;
      .line1{
        width: 100%;
        font-size:calc(unit(18,rpx) * 750 / 390);
        line-height:calc(unit(18,rpx) * 750 / 390);
        position: relative;
        white-space: nowrap;
        image{
          width:calc(unit(18,rpx) * 750 / 390);
          height:calc(unit(18,rpx) * 750 / 390);
          transform: translateY(calc(unit(3,rpx) * 750 / 390));

        }
      }
      .line2{
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size:calc(unit(12,rpx) * 750 / 390);
        line-height:calc(unit(12,rpx) * 750 / 390);
        color: #979797;
      }
    }
  }
  .messageBox{
    height:10%;
    width:calc(unit(260,rpx) * 750 / 390);
    position:absolute;
    top:22%;
    left:calc((100% - unit(260,rpx) * 750 / 390)/2);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .box{
      width:calc(unit(76,rpx) * 750 / 390);
      height: 100%;
      background-color: #FFFFFF;
      border-radius:calc(unit(8, rpx) * 750 / 390) ;
      border-top: calc(unit(1, rpx) * 750 / 390) solid black;
      border-left: calc(unit(1, rpx) * 750 / 390) solid black;
      border-right: calc(unit(4, rpx) * 750 / 390) solid black;
      border-bottom: calc(unit(4, rpx) * 750 / 390) solid black;
      position: relative;
      image{
        width:4vh;
        height:4vh;
        position: absolute;
        top:8%;
        left: calc((100% - 4vh )/2);
        z-index:35;
      }
      .line1{
        position: absolute;
        top:50%;
        height: 25%;
        width: 100%;
        text-align: center;
        font-size:calc(unit(18,rpx) * 750 / 390);
        line-height:calc(unit(18,rpx) * 750 / 390);
        z-index:40;
      }
      .line2{
        position: absolute;
        height: 25%;
        bottom:5%;
        width: 100%;
        text-align: center;
        font-size:calc(unit(16,rpx) * 750 / 390);
        color: #979797;
      }
    }
  }
  .bannerBox{
    width:calc(unit(360,rpx) * 750 / 390);
    height:19.69%;
    position: absolute;
    top:34%;
    left:calc((100% - unit(360,rpx) * 750 / 390)/2);
    border-radius:calc(unit(8, rpx) * 750 / 390) ;
    image{
      width: 100%;
      height: 100%;

    }
  }
  .clickBox{
    height: 32.55%;
    width: calc(unit(360,rpx) * 750 / 390);
    position: absolute;
    top:55.5%;
    left:calc((100% - unit(360,rpx) * 750 / 390)/2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .line{
      position: relative;
      height: 22.58%;
      width: 100%;
      background-color: white;
      border-radius:calc(unit(8,rpx) * 750 / 390);
      image{
        height: calc(unit(36,rpx) * 750 / 390);
        width: calc(unit(36,rpx) * 750 / 390);

        position: absolute;
        left:calc(unit(32,rpx) * 750 / 390);
        top:calc((100% - unit(36,rpx) * 750 / 390)/2);
      }
      text{
        font-size: calc(unit(18,rpx) * 750 / 390);;
        position: absolute;
        left: calc(unit(84,rpx) * 750 / 390);
        top:calc((100% - unit(21,rpx) * 750 / 390)/2);
      }
    }
  }
}
.aboutMeView{
  position: absolute;
  left:calc((100% - unit(300,rpx) * 750 / 390)/2); ;
  width: calc(unit(300,rpx) * 750 / 390);
  height: 57.9%;
  top:20%;
  z-index: 60;
  image{
    width: 100%;
    height: 100%;
  }
  .box{
    height:12%;
    position: absolute;
    bottom:0;
    width: 100%;
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
}